<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <title>地平线8号官方商城</title>
  <link rel="stylesheet" type="text/css" href="css/HanderFooter2.css">
  <link rel="stylesheet" type="text/css" href="css/shoppingindex.css">

</head>
<body>
<div style="overflow: hidden">
  <el-container>
    <el-header style="padding: 0;height: auto">
      <div id="header-navbar"> 地平线8号 尽管出发 创造不凡</div>
      <div class="header222" style="overflow:hidden;background-color: white">
        <div style=" width:20%;float: left;overflow:hidden; padding-top: 20px">
          <img src="./images/logo.png" alt=""
               style="float: left;margin-left:100px;padding-bottom:15px;width: 120px">
        </div>
        <div id="app" style="float: left ;
                     vertical-align: bottom;
                      width: 30%;
                     padding-left: 20px;">
          <el-menu :default-active="activeIndex"
                   text-color="#000"
                   mode="horizontal"
                   active-text-color="#ffd04b">
            <el-menu-item style=" margin-left:80px;font-size: 17px;width: 15%;text-align: center" index="1">商城</el-menu-item>
            <el-menu-item style=" margin-left:80px;font-size: 17px;width: 15%;text-align: center" index="2">周边</el-menu-item>
          </el-menu>
        </div>
        <div class="rightMenu" style="float:right;padding-top: 15px;width:25%">
          <input class="form-control menuipt" placeholder="请输入搜索内容">

          <div class="right icons soushuo" data-menu="2" style="margin-right: 30px;"style="width: 70%">

            <img src="./img/seach.png" class="iconimg1" style="width: 70%">
          </div>
          <div class="right icons" data-menu="0" onclick="window.location.href='/font/shoppingCart'" style="margin-right: 20px;position: relative;">
            <div id="cartNum" style="position: absolute;top:-6px;right:-6px;background: red;color: #fff;width:16px;height:16px;display:flex;justify-content:center;align-items:center;font-size: 12px;border-radius: 50%;letter-spacing: 0px">0</div>
            <img src="./img/shoppingcart.png" class="iconimg1" style="width: 70%">
          </div>
          <div class="right icons" data-menu="1">
            <img src="./img/people.png" class="iconimg1" style="width: 70%">
          </div>

        </div>

      </div>
    </el-header>
    <el-main style="padding:0;">
      <div class="main-top">
        <a href="#"><img src="./images/shippingindex-banner.jpg" alt="" width="100%"></a>
      </div>
      <div class="allGoods">
        <el-row :gutter="20">
          <el-col :span="6" v-for="p in prices">
            <div class="content" style="margin-top: 80px">
              <img :src="p.url" alt="商品" class="goodsImg">
              <div class="goodsName">{{p.title}}</div>
              <div class="price"><span>￥{{p.price}}</span></div>
              <div class="goodsicon">
                <span class="icon" style="display: inline-block" @click="car(1)">
                  <img src="images/dian.jpg" style="width: 12px;border-radius: 50%">
                  <!--<a href="" style="background-color:#000"></a>-->
                </span>
                <span class="icon" style="display: inline-block" @click="car(2)">
                  <img src="images/dian2.jpg" style="width: 12px;border-radius: 50%">
                  <!--<a href="" style="background-color:#909399"></a>-->
                </span>
              </div>
              <el-row class="button">
                <el-button round icon="el-icon-shopping-cart-1" size="mini">加入购物车</el-button>
              </el-row>
            </div>
          </el-col>

        </el-row>
      </div>
    </el-main>
    <el-footer style="height: auto;padding: 0">
      <div class="footModal clr">
        <div class="fmodal">
          <div style="display: flex">
            <div class="foot shop-mart"><div class="fs16 fwb line40" style="color:#000">商 城</div><div class="fs12 fwb  line24" onclick="category(0)">全部商品</div><div class="fs12 fwb  line24" onclick="category(10037)">新品上市</div><div class="fs12 fwb  line24" onclick="category(10000)">登机/托运</div><div class="fs12 fwb  line24" onclick="category(10024)">材质分类</div><div class="fs12 fwb  line24" onclick="category(10039)">镇店爆款</div><div class="fs12 fwb  line24" onclick="category(10038)">明星推荐</div><div class="fs12 fwb  line24" onclick="category(10017)">联名设计</div><div class="fs12 fwb  line24" onclick="category(10012)">旅行配件</div></div>
            <div class="foot">
              <div class="fs16 fwb line40 hover-item" style="color:#000" onclick="category(10012)">周 边</div>
              <div class="fs12 fwb line24 hover-item" onclick="category(10014)">收纳系列</div>
              <div class="fs12 fwb  hover-item" onclick="category(10015)">生活周边</div>
              <div class="foot-a">
                <a target="_blank" href="https://weibo.com/level8official"><img src="img/1.png"></a>
                <a target="_blank" href=" "><img src="img/2.png"></a>
                <a target="_blank" href="https://www.instagram.com/level8_official/"><img src="img/3.png"></a>
                <a target="_blank" href="https://www.facebook.com/pg/Level8Group/shopify"><img src="img/4.png"></a>
              </div>
            </div>
          </div>
          <style>
            .hover-item{
              cursor: pointer;
            }
          </style>
          <div class="follow" style="display: flex;flex-direction: column;justify-content: space-between">
            <div>
              <div class="followimg">
                <img src="img/7.png" style="margin-bottom:4px">
                <div class="fs12 fwb line30h30">关注公众号</div>
              </div>
              <div class="followimg" style="margin-right: 40px;">
                <img src="img/7.jpg" style="margin-bottom:4px">
                <div class="fs12 fwb line30h30">绑定产品</div>
              </div>
            </div>
            <div class="clr">
              <input class="form-control-bottom left searchipts" placeholder="搜索关键词">
              <a href="www.baidu.com"> <div class="bg-black left  tac searchimgs" style="display: flex;align-items: center;justify-content: center">
                <img src="img/51.png"></div></a>
            </div>
          </div>
        </div>
      </div>
      <div class=" tar foottext">
        <span class=" foottext1"> ©Copyright Level8 2020 </span>
        <span class=" foottext2"> level8@level8cases.com</span>
      </div>
    </el-footer>
  </el-container>
</div>
</body>
</html>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
  let v = new Vue({
    el: "body>div,.allGoods",
    data: function () {
      return {
        visible: false,
        activeIndex: '1',
        activeIndex2: '1',
        input: '',
        prices: [

        ]
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      car(id){
        console.log("点击的是:"+id)
      }
    },
    created:function () {
      axios.get("/shoppingindex/product/select").then(function (response) {
        v.prices=response.data;
      })
    }
  })
</script>